import { useMemo } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

export default (props: { head: string[]; data: Array<Array<string>> }) => {
  const { head, data } = props;
  const dataSource = useMemo(() => {
    return data.map((val, index) => {
      return {
        val,
        id: `${val}_${index}`,
      };
    });
  }, [data]);

  const columns: ColumnsType<any> = useMemo(() => {
    return head.map((name, index) => {
      return {
        title: name,
        width: 100,
        ellipsis: {
          showTitle: false,
        },
        render(_: string, record: any) {
          let str = record.val[index];
          if (typeof record.val[index] === 'object') {
            if (record.val[index].getTime) {
              str = dayjs(record.val[index]).format('MM月DD日');
            }
          }

          return (
            <div
              style={{
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
              title={str}
            >
              {str}
            </div>
          );
        },
      };
    });
  }, [head]);
  return (
    <Table
      size="small"
      dataSource={dataSource}
      rowKey={(row) => row.id}
      pagination={{ pageSize: 20, position: ['topLeft', 'bottomRight'] }}
      scroll={{
        x: 1200,
      }}
      columns={columns}
    />
  );
};
